<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    
    <!-- Reveal.js CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.3.1/dist/reveal.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.3.1/dist/theme/{{ theme }}.css">
    
    <!-- Code syntax highlighting -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.3.1/plugin/highlight/monokai.css">
    
    <!-- Custom animation styles -->
    <style>
        /* Custom animation classes */
        .slide-in-left {
            transform: translateX(-100%);
            transition: transform {{ default_duration }}s {{ default_easing }};
        }
        
        .slide-in-right {
            transform: translateX(100%);
            transition: transform {{ default_duration }}s {{ default_easing }};
        }
        
        .slide-in-up {
            transform: translateY(-100%);
            transition: transform {{ default_duration }}s {{ default_easing }};
        }
        
        .slide-in-down {
            transform: translateY(100%);
            transition: transform {{ default_duration }}s {{ default_easing }};
        }
        
        .fade-in {
            opacity: 0;
            transition: opacity {{ default_duration }}s {{ default_easing }};
        }
        
        .fade-out {
            opacity: 1;
            transition: opacity {{ default_duration }}s {{ default_easing }};
        }
        
        .zoom-in {
            transform: scale(0);
            transition: transform {{ default_duration }}s {{ default_easing }};
        }
        
        /* Animation triggers */
        .reveal .fragment.visible.slide-in-left,
        .reveal .fragment.visible.slide-in-right,
        .reveal .fragment.visible.slide-in-up,
        .reveal .fragment.visible.slide-in-down {
            transform: translateX(0) translateY(0);
        }
        
        .reveal .fragment.visible.fade-in {
            opacity: 1;
        }
        
        .reveal .fragment.visible.fade-out {
            opacity: 0;
        }
        
        .reveal .fragment.visible.zoom-in {
            transform: scale(1);
        }
        
        /* Custom timing delays */
        {% for delay, selector in animation_delays %}
        .reveal .fragment[data-fragment-index="{{ delay }}"] {
            transition-delay: {{ delay * 0.1 }}s;
        }
        {% endfor %}
        
        /* Responsive video */
        .reveal video {
            max-width: 100%;
            height: auto;
        }
        
        /* Better image sizing */
        .reveal img {
            max-width: 90%;
            max-height: 70vh;
            object-fit: contain;
        }
    </style>
</head>

<body>
    <div class="reveal">
        <div class="slides">
            {{ content }}
        </div>
    </div>

    <!-- Reveal.js JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.3.1/dist/reveal.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.3.1/plugin/notes/notes.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.3.1/plugin/markdown/markdown.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/reveal.js@4.3.1/plugin/highlight/highlight.js"></script>

    <script>
        // Reveal.js configuration
        Reveal.initialize({{ reveal_config }});
        
        // Custom animation event handlers
        Reveal.addEventListener('fragmentshown', function(event) {
            const fragment = event.fragment;
            const duration = fragment.getAttribute('data-animation-duration');
            const easing = fragment.getAttribute('data-animation-easing');
            
            if (duration || easing) {
                const style = fragment.style;
                if (duration) style.transitionDuration = duration + 's';
                if (easing) style.transitionTimingFunction = easing;
            }
        });
        
        // Auto-advance for video content
        Reveal.addEventListener('slidechanged', function(event) {
            const videos = event.currentSlide.querySelectorAll('video');
            videos.forEach(video => {
                if (video.hasAttribute('data-autoplay')) {
                    video.play();
                }
            });
        });
    </script>
</body>
</html>